<template>
	<div class="detailsTask">
		<div class="classIndex_h">
			<router-link :to="{path: '/class/homework/index',query: {id: path}}">作业 </router-link>
			<span><i>></i>{{title}}</span>
		</div>
		<div class="detailsTask_info  Task_data clear">
			<div class="detailsTask_info_l fl">
				<div class="detailsTask_info_l1">
					<template v-if="$g.user_id ===taskMsg.create_id || $store.getters.userInfo.is_headmaster === 1">
						<!-- <router-link :to='{path: "/class/homework/edit",query: {id: path,uid:taskMsg.id}}'>编辑</router-link> -->
						<a @click="deleteData(taskMsg.id)">删除</a>
					</template>
					<a :href="downloadFiler(0, taskMsg.resource_id)" v-if="taskMsg.type == 4" target="_blank">导出作业</a>
					<a :href="downloadFiler(1, taskMsg.resource_id)" v-if="taskMsg.type <= 3" target="_blank">导出作业</a>
					<a :href="downloadFiler(2, taskMsg.resource_id)" v-if="taskMsg.type == 5" target="_blank">导出作业</a>
				</div>
				<ul>
					<li class="detailsTask_if clear">
						<span>作业标题 </span>
						<div><strong>{{taskMsg.name}}</strong></div>
					</li>
					<li class="detailsTask_if clear">
						<span>作业内容 </span>
						<div><span>{{taskMsg.profile}}</span></div>
					</li>
					<li class="detailsTask_if clear">
						<span>作业类型 </span>
						<div>
							<span v-if="taskMsg.type === 1">知识点</span>
							<span v-if="taskMsg.type === 2">测试</span>
							<span v-if="taskMsg.type === 3">考试</span>
							<span v-if="taskMsg.type === 4">视频</span>
							<span v-if="taskMsg.type === 5">课件</span>
						</div>
					</li>
					<li class="detailsTask_if clear">
						<span>截止时间 </span>
						<div>
							<span>{{typeof(taskMsg.end_time) != 'undefined' && taskMsg.end_time.substring(0,16)}}</span>
						</div>
					</li>
					<li class="detailsTask_if clear">
						<span>关联资源 </span>
						<div class="objects_rs">
							<a @click="lookup('test')" v-if="taskMsg.type <= 3" target="_blank">
								{{taskMsg.resourcename}}
							</a>
							<a class="path_route" v-if="taskMsg.type === 4" @click="lookup('video')">
								{{taskMsg.resourcename}}
							</a>
							<a class="path_route" v-if="taskMsg.type === 5" :href="BASE_URL + taskMsg.resourcedownload" target="_blank">
								{{taskMsg.resourcename}}
							</a>
						</div>
					</li>
				</ul>
			</div>
			<div class="detailsTask_info_r fr">
				<div class="detailsTask_info_r1">
					<el-progress type="circle" :percentage="proportion" color="#3BB080"></el-progress>
				</div>
				<P>人数<i>{{people}}</i>人</P>
				<P>已完成 <i>{{completed}}</i>人</P>
				<P>未完成 <i>{{hangAir}}</i>人</P>
			</div>
		</div>
		<!--  -->
		<div class="detailsTask_table">
			<div class="detailsTask_table_h">
				<label>
					<input type="radio" name="details" checked>
					<span @click="changeCount(-1)">全部</span>
				</label>
				<label>
					<input type="radio" name="details">
					<span @click="changeCount(1)">已完成</span>
				</label>
				<label>
					<input type="radio" name="details">
					<span @click="changeCount(0)">未完成</span>
				</label>
			</div>
			<div class="detailsTask_table_c">
				<template>
					<el-table border :data="taskList" style="width: 100%">
						<el-table-column prop="user_name" label="姓名" align='center' width="100" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="user_number" align='center' label="账号" width="124" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="mark_status" label="状态" align='center' width="80" show-overflow-tooltip>
							<template slot-scope="scope">
								<span v-if="scope.row.answer_status === 1" class="el-icon-circle-check" title="已完成"></span>
								<span v-if="scope.row.answer_status === 0" class="el-icon-circle-close" title="未完成"></span>
							</template>
						</el-table-column>
						<el-table-column prop="type" label="类型" align='center' width="80" show-overflow-tooltip>
							<template slot-scope="scope">
								<span v-if="scope.row.type <= 3">试卷</span>
								<span v-if="scope.row.type === 4">视频</span>
								<span v-if="scope.row.type === 5">课件</span>
							</template>
						</el-table-column>
						<el-table-column prop="end_time" label="日期" align='center' width="155" show-overflow-tooltip>
						</el-table-column>
						<el-table-column label="操作" align='center' class="detailsTask_lv" width="100">
							<template slot-scope="scope">
								<template v-if="scope.row.type <= 3">
									<span v-if="scope.row.answer_status == 0">未作答</span>
									<router-link v-else-if="scope.row.mark_status == 1" :to="{path: '/class/homework/lookpaper',query: {id: path, uid: scope.row.user_id,  tid: taskId}}">查看</router-link>
									<router-link v-else-if="scope.row.mark_status  == 0" :to="{path: '/class/homework/reviewpaper',query: {id: path, uid: scope.row.user_id, tid: taskId}}">批阅</router-link>
								</template>
								<template v-if="scope.row.type === 4">
									<a @click="lookup('video')" target="_blank">查看</a>
								</template>
								<template v-if="scope.row.type === 5">
									<a :href="BASE_URL + coursewareUrl" target="_blank">查看</a>
								</template>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
			<div class="pageBox" v-if="total_number > page_size">
				<el-pagination @current-change="change_page" :page-size="page_size" :current-page="page_index" layout="prev, pager, next" :total="total_number">
				</el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: '',
	data() {
		return {
			people: '', //人数
			completed: '', //已完成
			hangAir: '', //未完成

			title: '',
			taskId: this.$route.query.tid,
			path: this.$route.query.id,
			taskMsg: {}, // 基本信息
			class_id: sessionStorage.getItem('classId'),

			taskList: [],
			page_size: this.$g.page_size,
			page_index: 1,
			total_number: 0,
			qstate: -1,
			videoUrl: '', //查看
			coursewareUrl: '',
			proportion: 0
		}
	},
	created() {
		this.getTaskMsg()
		this.getTaskCount()
		this.getTaskList()
	},
	watch: {
		'changData'(val, newval) {

			this.path = sessionStorage.getItem('classId')
			this.$router.back(-1)
		}
	},
	computed: {
		changData() {
			return deep_clone(this.$store.state.changData);
		},
	},
	methods: {

		/**
		 * 查看作业
		 * @DateTime 2020-03-05T16:28:22+0800
		 * @param    {[type]}                 type [test=试卷，video=视频 ]
		 * @return   {[type]}                      [description]
		 */
		lookup(type) {
			let host = sessionStorage.getItem('host')
			let redirectParams = sessionStorage.getItem('redirect_params')


			if (type == 'test') {
				this.$router.push({ path: '/class/homework/homeworkTask3', query: { id: this.path, tid: this.taskId } })
			} else if (type == 'video') {
				let link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=/home/openclassDetail&id=${this.videoUrl}`
				window.open(link)
			} else {
				// let link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=/home/openclassDetail&id=${this.videoUrl}`
			}

		},
		//基本信息
		getTaskMsg() {
			let success = (res => {
				let data = res.data;
				this.taskMsg = data;
				this.title = data.name;
				this.class_id = data.class_id
				this.videoUrl = data.resource_id
				this.coursewareUrl = data.resourcedownload
			});
			this.$ajax({
				url: 'api/task/task',
				method: 'get',
				params: { task_id: this.taskId },
				func: { success: success }
			})
		},
		//环形图统计
		getTaskCount() {
			let success = (res => {
				let data = res.data;
				this.people = data.success.length + data.un_success.length
				this.completed = data.success.length;
				this.hangAir = data.un_success.length;
				this.proportion = parseInt(((this.completed / (this.people === 0 ? 1 : this.people)) * 100).toFixed(0))

			});
			this.$ajax({
				url: 'api/task/get_task_count',
				method: 'get',
				params: {
					class_id: this.path,
					task_id: this.taskId
				},
				func: { success: success }
			})
		},
		//列表
		getTaskList() {
			let success = (res => {
				let data = res.data;
				this.taskList = data.data;
				this.total_number = data.data_sum;
				this.page_index = parseInt(data.page_index)
			});
			this.$ajax({
				url: 'api/task/get_taskinfo_by_taskclassid',
				method: 'get',
				params: {
					class_id: this.path,
					task_id: this.taskId,
					page_size: this.page_size,
					page_index: this.page_index,
					answer_status: this.qstate
				},
				func: { success: success }
			})
		},
		//列表筛选
		changeCount(num) {
			this.qstate = num;
			this.getTaskList()
		},
		//分页
		change_page(val) {
			this.page_index = val;
			this.getTaskList()
		},
		downloadFiler(type, id) {

			switch (type) {
				case 0:
					return `${this.BASE_URL}/index/openclass/videodownload?id=${id}&answer=separate`;
					break;
				case 1:
					return `${this.BASE_URL}/index/test/download_test?id=${id}&answer=only_test`;
					break;
				case 2:
					return `${this.BASE_URL}/index/resource/resourcedownload?id=${id}&answer=separate`;
					break;
			}
		},
		//删除
		deleteData(id) {
			this.$confirm('是否删除该作业?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'confirm-them',
			}).then(() => {

				let success = (res => {
					this.dataTable = false
					this.$message.success(res.msg);
					this.$router.push({ path: '/class/homework/index', query: { id: this.path } })
				})

				let params = { task_id: id }

				this.$ajax.delete('/api/task/task', { params, func: { success: success } })
			}).catch(() => {
				this.$message.info('已取消删除');
			});
		},
		goback() {
			this.$router.back(-1)
		},
	}
}
</script>